Archive

Archive for the ‘AJAX’ Category

Disable Future Dates in AJAX Control Toolkit Calendar Extender Control in ASP.Net

August 6, 2015 Leave a comment

Hi all,

Try this example to Disable Future Dates in AJAX Control Toolkit Calendar Extender Control in ASP.Net

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCalendar"></asp:CalendarExtender>
</form>
</body>
</html>

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
//To Disable the Future Dates in CalendarExtender control
CalendarExtender1.EndDate = DateTime.Now;
}

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net

Calculate Age from Selected Date in AJAX Calender Extender Using Javascript

May 9, 2014 1 comment

Dear all,

try this example to Calculate age from Selected Date in AJAX Calender Extender Using Javascript


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtDate" runat="server" />
<asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Images/Calendar.png" />
<cc1:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="DateSelectionChanged"
runat="server" TargetControlID="txtDate" PopupButtonID="imgPopup" />
<script type="text/javascript">
function DateSelectionChanged(e) {
var today = new Date();
var dob = e.get_selectedDate();
var months = (today.getMonth() - dob.getMonth() + (12 * (today.getFullYear() - dob.getFullYear())));
alert("Your age: " + Math.round(months / 12));
}
</script>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Javascript

Validate Age when Date is selected in ASP.Net AJAX CalendarExtender Control

August 1, 2013 Leave a comment

Hi all,

try this example to Validate Age when Birth Date is selected in ASP.Net AJAX Calendar Extender Control

1) Open VS 2008 and create a new website

2) Add new web page and from ToolBox drag and drop Script Manager, TextBox and AJAX Calender Controls

For Example we want to stop user if his/her Age is less than 20 years


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 <asp:TextBox ID="txtDate" runat="server" />
 <asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Images/Calendar.png" />
 <cc1:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="DateSelectionChanged"
 runat="server" TargetControlID="txtDate" PopupButtonID="imgPopup" />
 <script type="text/javascript">
 function DateSelectionChanged(e) {
 var today = new Date();
 var dob = e.get_selectedDate();
 var months = (today.getMonth() - dob.getMonth() + (12 * (today.getFullYear() - dob.getFullYear())));
 var age = Math.round(months / 12);
 if (age < 20) {
 alert("Error Age is less than 20");
 }
 }
 </script>
 </form>
</body>
</html>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Javascript

Display No Data Found with AJAX AutoComplete Extender

July 29, 2013 Leave a comment

Hi all,

try this example to Display No Data Found Message with AJAX AutoComplete Extender

1) Open VS 2008 and create new web site

2) Add new web page and from Toolbox drag and drop ScriptManager , TextBox and AJAX AutoComplete Controls


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
 body
 {
 font-family: Arial;
 font-size: 10pt;
 }
 .autocomplete_completionListElement
 {
 margin: 0px !important;
 background-color: white;
 color: windowtext;
 border: buttonshadow;
 border-width: 1px;
 border-style: solid;
 cursor: 'default';
 overflow: auto;
 max-height: 200px;
 text-align: left;
 list-style-type: none;
 padding: 0px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
 </asp:ScriptManager>
 <asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
 <cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="2"
 CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtContactsSearch"
 ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false" CompletionListCssClass="autocomplete_completionListElement"
 OnClientItemSelected="OnClientItemSelected">
 </cc1:AutoCompleteExtender>
 <script type="text/javascript">
 function OnClientItemSelected(sender, args) {
 var value = args.get_value();
 if (value == "No data found.") {
 $get("<%=txtContactsSearch.ClientID %>").value = "";
 }
 }
 </script>
 </div>
 </form>
</body>
</html>

In code behind :


[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
 using (SqlConnection conn = new SqlConnection())
 {
 conn.ConnectionString = ConfigurationManager
 .ConnectionStrings["constr"].ConnectionString;
 using (SqlCommand cmd = new SqlCommand())
 {
 cmd.CommandText = "select ContactName from Customers where " +
 "ContactName like @SearchText + '%'";
 cmd.Parameters.AddWithValue("@SearchText", prefixText);
 cmd.Connection = conn;
 conn.Open();
 List<string> customers = new List<string>();
 using (SqlDataReader sdr = cmd.ExecuteReader())
 {
 while (sdr.Read())
 {
 customers.Add(sdr["ContactName"].ToString());
 }
 }
 conn.Close();
 if (customers.Count == 0)
 {
 customers.Add("No data found.");
 }
 return customers;
 }
 }
}

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net

Disable Past Dates in AJAX Calender

January 3, 2013 Leave a comment

Hi all,

In previous post i show you how to allow user to select only first date of month

Allow User to Select only First day of month in AJAX Calender

in this post i will show how to prevent user to select past dates in AJAX Calender

1) Open VS2008 and create a new website

2) Add new Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls.

3) Add This Javascript function


<script type="text/javascript">
 function checkDate(sender, args) {
 if (sender._selectedDate < new Date()) {
 alert("You cannot select a day earlier than today!");
 sender._selectedDate = new Date();
 // set the date back to the current date
 sender._textbox.set_Value(sender._selectedDate.format(sender._format))
 }
 }
 </script>

4) Your page will be like this


<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 Please Select Date
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <asp:CalendarExtender ID="CalendarExtender1" BehaviorID="CalendarExtender1" runat="server"
 TargetControlID="TextBox1" PopupButtonID="TextBox1" OnClientDateSelectionChanged="checkDate">
 </asp:CalendarExtender>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net

Allow User to Select only First day of month in AJAX Calender

November 10, 2012 Leave a comment

Hi all,

try this example to Allow User to Select only First day of month in AJAX Calender

1) Open VS2008 and create a new website

2) Add New Web Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls

3) Add This Javascript function


<script language="javascript" type="text/javascript">
 function CheckDate(sender, args) {
 alert(sender._selectedDate.getDate());
 if (sender._selectedDate.getDate() != 1) {
 alert("Only first date are allowed.");
 // Cancel selected the date
 sender._textbox.set_Value("")
 }
 }
</script>

4) Your Page will be like that


<div>
 Select Date :
 <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
 <cc1:CalendarExtender ID="txt_Date_CalendarExtender" runat="server"
 Enabled="True" TargetControlID="txt_Date" OnClientDateSelectionChanged="CheckDate">
 </cc1:CalendarExtender>
</div>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net, Javascript

Disabling Past Dates in AJAX Calendar

September 13, 2012 Leave a comment

Hi all,

try this example to disable past dates in AJAX Calender

1) Open VS2008 and create a new website

2) Add New Web Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls

3) Add This Javascript function


<script language="javascript" type="text/javascript">
 function CheckForPastDate(sender, args) {
 var selectedDate = new Date();
 selectedDate = sender._selectedDate;
 var todayDate = new Date();
 if (selectedDate.getDateOnly() < todayDate.getDateOnly()) {
 sender._selectedDate = todayDate;
 sender._textbox.set_Value(sender._selectedDate.format(sender._format));
 alert("Date Cannot be in the past.");
 }
 }
 </script>

4) Your Page will be like that


<div>
 Select Date :
 <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
 <cc1:CalendarExtender ID="txt_Date_CalendarExtender" runat="server"
 Enabled="True" TargetControlID="txt_Date" OnClientDateSelectionChanged="CheckForPastDate">
 </cc1:CalendarExtender>
 </div>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net, Javascript

AJAX SlideShow Extender with Images from Folder

August 13, 2012 Leave a comment

Hi all,

try this example to use Ajax SlideShow Extender with Images from Folder

1) Open VS2008 and create a new website

2) Create Folder in website Root and add your images that you want to display using AJAX SlideShow Extender name it “Images”

3) Add WebSerive name it “Slideshow.asmx” and add the following Code


[System.Web.Services.WebMethod]
 [System.Web.Script.Services.ScriptMethod]
 public AjaxControlToolkit.Slide[] GetSlides()
 {
 string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/Images"));
 AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[imagenames.Length];
 for (int i = 0; i < imagenames.Length; i++)
 {
 string[] file = imagenames[i].Split('\\');
 photos[i] = new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
 }
 return photos;
 }

4) Add new Web Page and ScriptManager , Image , Label , Three Buttons (For Play , Prev and Next) and AJAX SildeShow Extender


<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
 </ajax:ToolkitScriptManager>
 <div>
 <table style="border: Solid 3px #D55500; width: 400px; height: 400px" cellpadding="0"
 cellspacing="0">
 <tr style="background-color: #D55500">
 <td style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">
 <asp:Label ID="lblTitle" runat="server"></asp:Label>
 </td>
 </tr>
 <tr>
 <td>
 <asp:Image ID="imgslides" runat="server" Height="400px" Width="400px" ImageUrl="~/Images/1.JPG" />
 </td>
 </tr>
 <tr>
 <td align="center">
 <asp:Label ID="lblimgdesc" runat="server"></asp:Label>
 </td>
 </tr>
 <tr>
 <td align="center">
 <asp:Button ID="btnPrevious" runat="server" Text="Prev" CssClass="button" />
 <asp:Button ID="btnPlay" runat="server" Text="Play" CssClass="button" />
 <asp:Button ID="btnNext" runat="server" Text="Next" CssClass="button" />
 </td>
 </tr>
 </table>
 <ajax:SlideShowExtender runat="server" AutoPlay="true" ImageTitleLabelID="lblTitle"
 ImageDescriptionLabelID="lblimgdesc" Loop="true" NextButtonID="btnNext" PreviousButtonID="btnPrevious"
 PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop" TargetControlID="imgslides"
 SlideShowServicePath="Slideshow.asmx" SlideShowServiceMethod="GetSlides">
 </ajax:SlideShowExtender>
 </div>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net

AJAX Slider Extender Control and GridView for Alphabetical Filtering

Hi all,

try this example to use AJAX Slider Extender Control with GridView for Alphabetical Filtering

1) Open VS2008 and create a new website and add new web page

2) From Toolbox drag ScriptManager,AJAX Silder Control , Gridview and TextBox Control

(Hint: in this example i will use Northwind database and bind my Gridview from Employees table)


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style>
 body
 {
 font-family: "trebuchet ms" , sans-serif;
 font-size: 10pt;
 background-color: #fff;
 color: #555;
 line-height: 1.7em;
 }
 p
 {
 paddding-top: 0px;
 }
 table
 {
 border: none;
 border-collapse: collapse;
 margin-bottom: 1.5em;
 }
 table td
 {
 vertical-align: top;
 position: relative;
 }
 td p
 {
 padding: 4px;
 margin: -1px 0px;
 font-size: 8px;
 width: 12px;
 line-height: 10px;
 border: solid 1px #d1d1d1;
 cursor: hand;
 }
 td p.letterSelected
 {
 font-weight: bold;
 width: 14px;
 background-color: #c1c1c1;
 font-size: 10px;
 color: #fff;
 padding: 4px 4px 4px 6px;
 border: solid 1px #d1d1d1;
 }
 .letterbox
 {
 position: absolute;
 top: 100px;
 left: 100px;
 height: 60px;
 width: 100px;
 z-index: 5;
 border: solid 1px gray;
 background: #fff;
 filter: alpha(opacity=70);
 opacity: .7;
 text-align: center;
 font-size: 48px;
 padding-top: 30px;
 font-weight: bold;
 display: none;
 }
 .rowA
 {
 background: #c1c1c1;
 }
 .rowB
 {
 background: #f1f1f1;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 <table>
 <td>
 <asp:TextBox runat="server" ID="SliderBox" />
 <cc1:SliderExtender runat="server" ID="SliderBoxExtender" Maximum="26" Length="515"
 Minimum="0" TargetControlID="SliderBox" Orientation="vertical" />
 </td>
 <td>
 <p id="row_0" onclick="setVal(this.id)">
 All</p>
 <p id="row_1" onclick="setVal(this.id)">
 A</p>
 <p id="row_2" onclick="setVal(this.id)">
 B</p>
 <p id="row_3" onclick="setVal(this.id)">
 C</p>
 <p id="row_4" onclick="setVal(this.id)">
 D</p>
 <p id="row_5" onclick="setVal(this.id)">
 E</p>
 <p id="row_6" onclick="setVal(this.id)">
 F</p>
 <p id="row_7" onclick="setVal(this.id)">
 G</p>
 <p id="row_8" onclick="setVal(this.id)">
 H</p>
 <p id="row_9" onclick="setVal(this.id)">
 I</p>
 <p id="row_10" onclick="setVal(this.id)">
 J</p>
 <p id="row_11" onclick="setVal(this.id)">
 K</p>
 <p id="row_12" onclick="setVal(this.id)">
 L</p>
 <p id="row_13" onclick="setVal(this.id)">
 M</p>
 <p id="row_14" onclick="setVal(this.id)">
 N</p>
 <p id="row_15" onclick="setVal(this.id)">
 O</p>
 <p id="row_16" onclick="setVal(this.id)">
 P</p>
 <p id="row_17" onclick="setVal(this.id)">
 Q</p>
 <p id="row_18" onclick="setVal(this.id)">
 R</p>
 <p id="row_19" onclick="setVal(this.id)">
 S</p>
 <p id="row_20" onclick="setVal(this.id)">
 T</p>
 <p id="row_21" onclick="setVal(this.id)">
 U</p>
 <p id="row_22" onclick="setVal(this.id)">
 V</p>
 <p id="row_23" onclick="setVal(this.id)">
 W</p>
 <p id="row_24" onclick="setVal(this.id)">
 X</p>
 <p id="row_25" onclick="setVal(this.id)">
 Y</p>
 <p id="row_26" onclick="setVal(this.id)">
 Z</p>
 </td>
 <td style="vertical-align: top;">
 <div class="letterbox" id="LetterBox">
 </div>
 <asp:UpdatePanel runat="server" ID="PersonGridUpdatePanel" UpdateMode="conditional">
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="hiddenButton" EventName="Click" />
 </Triggers>
 <ContentTemplate>
 <asp:GridView ID="PersonGrid" runat="server" AllowPaging="true" PageSize="20" AutoGenerateColumns="false"
 Style="z-index: 4;" RowStyle-CssClass="rowA" AlternatingRowStyle-CssClass="rowB">
 <Columns>
 <asp:BoundField DataField="Fullname" HeaderText="Person's Name" />
 </Columns>
 <EmptyDataTemplate>
 No Data found.
 </EmptyDataTemplate>
 </asp:GridView>
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:Button runat="server" ID="hiddenButton" Style="display: none;" OnClick="LetterSelected"
 UseSubmitBehavior="false" />
 </td>
 </table>
 <script type="text/javascript">
 //! set the java functions to each of the slider events
 function pageLoad(sender, e) {
 var slider = $find('<%=SliderBoxExtender.ClientID %>');
 slider.add_slideStart(sliderStart);
 slider.add_slideEnd(sliderEnd);
 slider.add_valueChanged(valChanged);
 }
 function sliderStart() {
 var fd = document.getElementById('LetterBox');
 fd.style.display = 'inline';
 }

function sliderEnd() {
 var fd = document.getElementById('LetterBox');
 fd.style.display = 'none';
 submitForm();
 }

function valChanged() {
 var fd = document.getElementById('LetterBox');
 var valBox = document.getElementById('<%=SliderBox.ClientID %>');
 var val = valBox.value;
 var i = 0
 var grow
 for (i = 0; i < 27; i++) {
 grow = document.getElementById('row_' + i);
 if (i == val) {
 grow.className = 'letterSelected';
 fd.innerHTML = grow.innerHTML;
 }
 else { grow.className = ''; }
 }
 }

function submitForm() {
 var hidBtn = document.getElementById('<%=hiddenButton.ClientID %>');
 hidBtn.click();

}

function setVal(pID) {
 var slider = $find('<%=SliderBoxExtender.ClientID %>');
 var val = pID.replace('row_', '')
 slider.set_Value(val);
 valChanged();
 submitForm();
 }
 </script>
 </form>
</body>
</html>

In Code behind :-


#region Method
 private void bind(string Letter)
 {
 SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
 SqlCommand comm = new SqlCommand();
 comm.Connection = conn;
 comm.CommandText = @"SELECT(E.LastName + ', ' + E.FirstName) as FullName,E.EmployeeID
 FROM Employees as E
 WHERE (E.LastName like @FirstLetter + '%') ORDER BY E.LastName, E.FirstName";
 comm.Parameters.Add("@FirstLetter", SqlDbType.NVarChar).Value = Letter == "All" ? "" : Letter;
 SqlDataAdapter adpter = new SqlDataAdapter(comm);
 DataTable dt = new DataTable();
 adpter.Fill(dt);
 PersonGrid.DataSource = dt;
 PersonGrid.DataBind();
 }
 #endregion

public string GetSelected(string value)
 {
 string result = string.Empty;
 switch (value)
 {
 case "0":
 result = "All";
 break;
 case "1":
 result = "A";
 break;
 case "2":
 result = "B";
 break;
 case "3":
 result = "C";
 break;
 case "4":
 result = "D";
 break;
 case "5":
 result = "E";
 break;
 case "6":
 result = "F";
 break;
 case "7":
 result = "G";
 break;
 case "8":
 result = "H";
 break;
 case "9":
 result = "I";
 break;
 case "10":
 result = "J";
 break;
 case "11":
 result = "K";
 break;
 case "12":
 result = "L";
 break;
 case "13":
 result = "M";
 break;
 case "14":
 result = "N";
 break;
 case "15":
 result = "O";
 break;
 case "16":
 result = "P";
 break;
 case "17":
 result = "Q";
 break;
 case "18":
 result = "R";
 break;
 case "19":
 result = "S";
 break;
 case "20":
 result = "T";
 break;
 case "21":
 result = "U";
 break;
 case "22":
 result = "V";
 break;
 case "23":
 result = "W";
 break;
 case "24":
 result = "X";
 break;
 case "25":
 result = "Y";
 break;
 case "26":
 result = "Z";
 break;

 }
 return result;
 }

protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 string selected = GetSelected(SliderBox.Text);
 bind(selected);
 }
 }
 protected void LetterSelected(object sender, EventArgs e)
 {
 string selected = GetSelected(SliderBox.Text);
 bind(selected);
 }

3) In Web.Config we will add connectionstring


<connectionStrings>
 <add name="conn" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Hope this helps

Good Luck

 

Categories: AJAX, ASP.Net

Get Text and Value Pair with AJAX AutoComplete Extender in Gridview

May 6, 2012 6 comments

Hi all

try this example to Get Text and Value Pair with AJAX AutoComplete Extender in Gridview

In previous post i show how to Get Text and Value Pair with AJAX AutoComplete Extender

Get Text and Value Pair with AJAX AutoComplete Extender

Step1 :- Create a new Website and add web page

Step2:- Add Web.Config file and add the connection String of your Database to be like that


<connectionStrings>
 <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Step3 :- Open web page and Add ScriptManager and  Gridview control and Bind it using SqlDataSource control and put them inside UpdatePanel control so your page will be like


<head runat="server">
 <title></title>
 <script type="text/javascript">
 function IAmSelected(source, eventArgs) {
 if (source) {
 // Get the HiddenField ID.
 var hiddenfieldID = source.get_id().replace("AutoCompleteExtender1", "HiddenField1");
 $get(hiddenfieldID).value = eventArgs.get_value();
 }
 alert("HiddenFieldID :" + hiddenfieldID + " HiddenFieldValue : " + $get(hiddenfieldID).value);
 alert(" Key : " + eventArgs.get_text() + " Value : " + eventArgs.get_value());
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
 CellPadding="4" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID"
 InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName"
 SortExpression="ProductName" />
 <asp:TemplateField HeaderText="Category Name" SortExpression="CategoryID">
 <ItemTemplate>
 <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
 <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
 DelimiterCharacters="" Enabled="True" TargetControlID="TextBox1"
 ServicePath="AutoExtender.asmx"
 CompletionSetCount="20" OnClientItemSelected="IAmSelected"
 MinimumPrefixLength="1"
 ServiceMethod="GetCategoryName" ContextKey="HiddenField1">
 </cc1:AutoCompleteExtender>
 <asp:HiddenField ID="HiddenField1" runat="server"
 />
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT Products.ProductName, Products.ProductID, Products.CategoryID, Categories.CategoryName FROM Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID">
 </asp:SqlDataSource>
 <asp:Button ID="Button1" runat="server" Text="Get Value" onclick="Button1_Click" />
 <br />
 <asp:Label ID="Label1" runat="server" ></asp:Label>
 </div>
 </form>

Step4 :- Add a new Web Service and name it AutoExtender.asmx and add this Web method


[WebMethod]
 public string[] GetCategoryName(string prefixText, int count)
 {
 if (count == 0)
 {
 count = 10;
 }
 List<string> listString = new List<string>();
 using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True"))
 {
 SqlCommand cm = new SqlCommand("SELECT CategoryName,CategoryID FROM Categories Where CategoryName like '" + prefixText + "%'", con);
 con.Open();
 SqlDataReader dr = cm.ExecuteReader();
 if (dr.HasRows)
 {
 while (dr.Read())
 {
 listString.Add(AutoCompleteExtender.CreateAutoCompleteItem(dr["CategoryName"].ToString(), dr["CategoryID"].ToString()));
 //c.FullName, serializer.Serialize(c))
 }
 }
 }
 string[] str = listString.ToArray();
 return str;
 }

Now run your website

Hope this helps

Good Luck

 

Categories: AJAX, ASP.Net